<template>
  <view class="category-container">
    <!-- 一级分类 -->
    <scroll-view 
      class="primary-category" 
      scroll-y 
      :style="{height: `${windowHeight}px`}"
    >
      <view 
        v-for="(item, index) in categories" 
        :key="index"
        class="primary-item"
        :class="{active: activeIndex === index}"
        @click="switchCategory(index)"
      >
        <text class="primary-text">{{item.category}}</text>
        <view class="active-indicator" v-if="activeIndex === index"></view>
      </view>
    </scroll-view>

    <!-- 二级分类 -->
    <scroll-view 
      class="secondary-category" 
      scroll-y 
      :style="{height: `${windowHeight}px`}"
      :scroll-top="scrollTop"
    >
      <view 
        v-for="(secondary, secIndex) in subCategories" 
        :key="secIndex"
        class="secondary-section"
      >
        <view class="section-header">
          <text class="section-title">/{{secondary.category}}/</text>
        </view>
        
        <view class="tertiary-grid">
          <view 
            v-for="(tertiary, terIndex) in secondary.children" 
            :key="terIndex"
            class="tertiary-item"
            @click="navigateToBookList(tertiary)"
          >
            <text class="tertiary-text">{{tertiary.category}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: 0, // 窗口高度
      categories: [],  // 一级分类
      activeIndex: 0,  // 当前选中项索引
      subCategories: [], // 二级分类
      scrollTop: 0     // 滚动位置
    }
  },
  methods: {
    // 获取分类数据
    async fetchCategories() {
      try {
        const { data } = await uni.$http.get('/category/list')
        if (data.code !== 1) throw new Error('获取分类失败')
        
        this.categories = data.data || []
        if (this.categories.length > 0) {
          this.subCategories = this.categories[0].children || []
        }
      } catch (error) {
        console.error('获取分类失败:', error)
        uni.showToast({
          title: error.message || '获取分类失败',
          icon: 'none'
        })
      }
    },
    
    // 切换一级分类
    switchCategory(index) {
      if (this.activeIndex === index) return
      
      this.activeIndex = index
      this.subCategories = this.categories[index].children || []
      // 重置二级分类滚动位置
      this.scrollTop = this.scrollTop === 0 ? 1 : 0
    },
    
    // 跳转到图书列表
    navigateToBookList(category) {
      uni.navigateTo({
        url: `/subpkg/books_list/books_list?id=${category.id}&category=${encodeURIComponent(category.category)}`
      })
    }
  },
  onLoad() {
    // 获取窗口高度
    const { windowHeight } = uni.getSystemInfoSync()
    this.windowHeight = windowHeight
    
    // 获取分类数据
    this.fetchCategories()
  }
}
</script>

<style lang="scss">
.category-container {
  display: flex;
  height: 100vh;
  background-color: #f8f8f8;
  
  .primary-category {
    width: 180rpx;
    background-color: #fff;
    
    .primary-item {
      position: relative;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1rpx solid #f5f5f5;
      
      &.active {
        background-color: #f8f8f8;
        font-weight: bold;
        
        .primary-text {
          color: #c00;
        }
      }
      
      .active-indicator {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 40rpx;
        background-color: #c00;
        border-radius: 3rpx;
      }
    }
  }
  
  .secondary-category {
    flex: 1;
    padding: 20rpx;
    box-sizing: border-box;
    
    .secondary-section {
      margin-bottom: 30rpx;
      background-color: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .section-header {
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        .section-title {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
        }
      }
      
      .tertiary-grid {
        display: flex;
        flex-wrap: wrap;
        padding: 10rpx;
        
        .tertiary-item {
          width: 33.33%;
          padding: 20rpx;
          box-sizing: border-box;
          
          .tertiary-text {
            display: block;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            font-size: 26rpx;
            color: #666;
            background-color: #f8f8f8;
            border-radius: 8rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all 0.2s;
            
            &:active {
              background-color: #e6e6e6;
              transform: scale(0.98);
            }
          }
        }
      }
    }
  }
}
</style>